<!Doctype html>
<html>
<head>
    <title>ECharts 在线构建</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <header id="header">
        <div class="logo">
            <a href="//echarts.baidu.com" target="_blank">
                <img src="img/logo.png" />
            </a>
            <h1>ECharts</h1>
        </div>
        <!--
        <nav calss="nav">
            <ul>
                <li><a target="_blank" href="http://echarts.baidu.com/doc/doc.html">Doc</a></li>
                <li><a target="_blank" href="http://echarts.baidu.com/doc/example.html">Example</a></li>
                <li><a target="_blank" href="http://echarts.baidu.com/doc/doc.html">Tools</a></li>
                <li><a target="_blank" href="https://github.com/ecomfe/echarts/issues">Q&A</a></li>
                <li><a target="_blank" href="http://echarts.baidu.com/doc/about.html">About</a></li>
            </ul>
        </nav>
        -->
    </header>
    <main id="main">
        <h1>ECharts 在线构建</h1>
        <p style="color: red; text-align: center; font-size: 18px;">该构建工具只适用于 ECharts 2，最新的 ECharts 3 请前往 <a href="http://echarts.baidu.com/builder.html">http://echarts.baidu.com/builder.html</a></p>
        <div id="configuration">
            <section id="charts">
                <h3>图表<span>chart</span></h3>
                <p class="desc">选择要打包的图表</p>
                <ul>
                    <li class="checked">
                        <img src="img/icon/chart/bar.png">
                        <input type="checkbox" name="bar">
                        <h5>柱状图 <span>Bar</span></h5>
                    </li>
                    <li class="checked">
                        <img src="img/icon/chart/line.png">
                        <input type="checkbox" name="line">
                        <h5>折线图 <span>Line</span></h5>
                    </li>
                    <li class="checked">
                        <img src="img/icon/chart/pie.png">
                        <input type="checkbox" name="pie">
                        <h5>饼图 <span>Pie</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/radar.png">
                        <input type="checkbox" name="radar">
                        <h5>雷达图 <span>Radar</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/scatter.png">
                        <input type="checkbox" name="scatter">
                        <h5>散点图 <span>Scatter</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/k.png">
                        <input type="checkbox" name="k">
                        <h5>K 线图 <span>K</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/map.png">
                        <input type="checkbox" name="map">
                        <h5>地图 <span>Map</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/chord.png">
                        <input type="checkbox" name="chord">
                        <h5>和弦图 <span>Chord</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/force.png">
                        <input type="checkbox" name="force">
                        <h5>力导向图 <span>Force</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/gauge.png">
                        <input type="checkbox" name="gauge">
                        <h5>仪表盘 <span>Gauge</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/funnel.png">
                        <input type="checkbox" name="funnel">
                        <h5>漏斗图 <span>Funnel</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/eventRiver.png">
                        <input type="checkbox" name="eventRiver">
                        <h5>事件河流图 <span>eventRiver</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/venn.png">
                        <input type="checkbox" name="venn">
                        <h5>韦恩图 <span>Venn</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/treemap.png">
                        <input type="checkbox" name="treemap">
                        <h5>Treemap</h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/tree.png">
                        <input type="checkbox" name="tree">
                        <h5>树图 <span>Tree</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/wordCloud.png">
                        <input type="checkbox" name="wordCloud">
                        <h5>字符云 <span>wordCloud</span></h5>
                    </li>
                    <li>
                        <img src="img/icon/chart/heatmap.png">
                        <input type="checkbox" name="heatmap">
                        <h5>热力图 <span>heatmap</span></h5>
                    </li>
                </ul>
            </section>
            <section id="components">
                <h3>组件<span>component</span></h3>
                <p class="desc">选择要打包的组件</p>
                <ul>
                    <li>
                        <img src="img/icon/component/data-range.png">
                        <input type="checkbox" name="dataRange">
                        <h5>值域漫游</h5>
                    </li>
                </ul>
            </section>
            <section id="other">
                <h3>其它选项<span>other</span></h3>
                <p>
                    <input type="checkbox" id="compress" name="compress" checked="checked">
                    <label for="compress">代码压缩</label>
                    <p class="desc">是否使用 UglifyJS 压缩打包后的代码</p>
                </p>
                <p>
                    <input type="checkbox" id="amd" name="amd">
                    <label for="amd">AMD 模块</label>
                    <p class="desc">是否打包成 AMD 标准的模块，AMD 标准的模块需要使用 <a target="_blank" href="//github.com/ecomfe/esl">esl</a> 或者 <a target="_blank" href="//requirejs.org">RequireJS</a> 加载。</p>
                </p>
            </section>
        </div>
        <div id="action">
            <button id="build">生 成</button>
        </div>
    </main>

    <footer>
    </footer>

    <script src="lib/jquery.js"></script>
    <script src="app/log.js"></script>
    <script>

        function updateCheckbox() {
            $('#charts input, #components input').each(function () {
                $(this).attr('checked', $(this).parent().hasClass('checked'));
            });
        }

        $('#charts li, #components li').click(function () {
            $(this).toggleClass('checked');

            updateCheckbox();
        });

        updateCheckbox();

        // Build
        $("#build").click(function () {
            var charts = [];
            $('#charts .checked input').each(function () {
                charts.push($(this).attr('name'));
            });

            var components = [];
            $('#components .checked input').each(function () {
                components.push($(this).attr('name'));
            });

            var parameters = 'charts=' + charts.join(',') + '&components=' + components.join(',');

            if (!$('#compress').prop('checked')) {
                parameters += '&source=true';
            }
            if ($('#amd').prop('checked')) {
                parameters += '&amd=true';
            }
            if ($('#dev').prop('checked')) {
                parameters += '&dev=true';
            }

            parameters += '&version=2';

            ecLog({
                'build-parameters': parameters
            });

            window.open('build.html?' + parameters);
        });
    </script>
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
</body>
<body>
